@import "in.less";

.x-wp{
  width:1200px;
  margin:0 auto;
}
.header{background:@brand-info;}
.header_bg{
  height:680px;
  background-repeat: no-repeat;
  background-position: center;
  .title{
    color:white;
    &.color-gray{
      color:@gray;
    }
    h1{
      font-size:4.8rem;
      margin:15px 0;
    }
    p{
      font-size:2rem;
      line-height: 1.7;
    }
  }
  .u-info{
    color:white;
    padding-top:20px;
    .tag{
      padding:5px;
      background:#0f8cc0;
      color: white;
    }
    .title{
      margin:10px 0 10px;
    }
    .tex{
      margin:15px 0;
    }
    .u-btnbox{
      a{
        background: white;
        color:@brand-info;
        padding:8px 15px;
        border-radius: 3px;
        margin-right: 10px;
        line-height: 24px;
        display: inline-block;
        img{
          vertical-align: middle;
          margin-right:10px;
        }
        &.bor-btn{
          color: white;
          .f-border(white);
          background:none;
        }
      }
    }
    .u-searbox{
      background:white;
      width:500px;
      margin:10px auto 0;
      height:60px;
      position: relative;
      input{
        line-height: 60px;
        font-size:18px;
        border:0px;
        width: 100%;
        box-sizing: border-box;
        padding:0 10px;
      }
      .btn{
        position: absolute;
        top:15px;
        right:10px;
      }
    }
  }
}

.m-header{
  height:50px;
  line-height: 50px;
  overflow: hidden;
  .u-site{
    a{
      display: inline-block;
      float: left;
      img{
        vertical-align: middle;
        .f-size(94px;24px);
        margin-right:5px;
      }
    }

    span{
      display: inline-block;
      font-size:1.8rem;
      color:white;
    }
  }
  .u-nav{
    height:50px;
    line-height: 50px;
    a{
      color:white;
      margin-left:20px;
      font-size:1.4rem;
    }
  }
}


.m-centerbox{
  padding:80px 0;
  .u-title{
    font-size:3.6rem;
    text-align: center;
  }
  .zhuanhuanzhichi{
    padding:50px 0 20px;
    li{
      width:33%;text-align: center;box-sizing: border-box;padding:0 50px 40px;float: left;
      .icon{
        padding-bottom:10px;
        span{
          line-height:80px;width:80px;height:80px;background:red;color:#fff;display: inline-block;border-radius: 50%;
        }
      }
      p{
        font-size:1.6rem;
        color:@gray;
        margin-top:5px;
      }
      i{font-size:4.5rem;}
      em {
        i{font-size:38px;color:@brand-info;}
      }
    }
  }
  .more-tex{
    text-align: center;
    color:@gray;
    font-size:3rem;
    margin-bottom:90px;
  }
  .u-icons{
    padding-top:80px;
    text-align: center;
    li{
      padding:20px 0;
      width:24%;
      margin-bottom:50px;
      display: inline-block;
      img{
        width:110px;
      }
      p{
        font-size:2rem;
        display: block;
        color:@gray;
        margin-top:20px;
      }
      .tex{
        margin:0 30px;
        color:@gray-light;
        padding-top:10px;
        font-size:1.4rem;
        line-height: 1.7;
      }

      &:hover{
        -moz-box-shadow:0px 2px 3px #ddd;
        -webkit-box-shadow:0px 2px 3px #ddd;
      }
    }
  }
  .u-banertab{
    height:400px;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    .u-tabs{
      position: absolute;
      bottom:0px;
      left:0px;right:0px;
      background:rgba(0,0,0,.4);
      text-align: center;
      a{
        display: inline-block;
        color: white;
        width:120px;
        height:50px;
        font-size:1.4rem;
        line-height: 50px;
        &:hover,&.active{
          background:rgba(255,255,255,.3);
        }
      }
    }
  }
  .u-question{
    text-align: center;
    padding:50px 0 0;
    dl{
      text-align: left;
      float: left;
      height:150px;
      width:24%;
      display: inline-block;
      dt{
        font-size:2rem;
        padding:20px 0;
        img{
          vertical-align: middle;
        }
      }
      dd{
        font-size:1.4rem;
        line-height: 1.7;
        color:@gray-light;
        height:100px;
        padding-left:33px;
        a{
          display: block;
        }
      }

    }
  }
  .u-oneimg{
    padding:80px 0;
    text-align: center;
  }
  .u-teximg{
    height:390px;
    margin-top:80px;
    background-position: center;
    background-repeat: no-repeat;
    .u-tex{
      color:@gray;
      padding:120px 0 0 150px;
        h4{
          font-size:3rem;
          margin-bottom:10px;
        }
      p{
        font-size: 2.4rem;
        line-height: 1.7;
      }
    }
  }
  .u-apps{
    margin-top:70px;
    text-align: center;
    li{
      width:20%;
      margin:0 2%;
      background: white;
      margin-bottom:50px;
      display: inline-block;
      padding:20px 0;
      img{
        width:100px;
      }
      p{
        font-size:1.4rem;
        display: block;
        color:@gray;
        margin-top:10px;
      }
      &:hover{
        -moz-box-shadow:0px 2px 3px #ddd;
        -webkit-box-shadow:0px 2px 3px #ddd;
      }
    }
  }
  .u-imgstex{
    width:100%;
    max-width: 1900px;
    margin:0 auto;
    margin-top:80px;
    dl{
      width:25%;
      float: left;
      background-size:cover;
      background-position: center;
      height:320px;
      position: relative;
      color: white;
      dt{
        position: absolute;
        top:30px;
        left: 30px;
        z-index: 222;
        p{
        font-size:2.4rem;
        }
        span{
          display: inline-block;
          background: white;
          height:3px;
          width:60px;
        }
      }
      dd{
        display: none;
        position: absolute;
        left:0px;
        padding:100px 30px 0;
        line-height: 1.7;
        right:0px;
        top:0px;
        bottom:0px;
        font-size:1.4rem;
        background-image: -webkit-linear-gradient(top left, #34a1d6, #34c1d6 90%);
      }
      &:hover{
        dd{
          display: inline-block;
        }
      }
    }
  }
  .u-appshows{
    width:1000px;
    overflow: hidden;
    margin:50px auto;
    .owl-item {
      float: left;
      a{
        display: inline-block;
        .f-border();
        .f-size(125px;60px);
        img{
          width:125px;
          height:60px;
          box-sizing: border-box;
        }
        &:hover{
          img {
          }
        }
      }
    }
    .owl-stage-outer{height:80px;}
    .owl-dots{
      text-align: center;
      margin-top:10px;
      .owl-dot{
        display: inline-block;
        margin:5px;
        span{
          background:@gray-lighter;
          .f-size(15px;15px);
          display: inline-block;
          border-radius: 50%;
        }
        &.active{
          span{
            background:@gray-light;
          }
        }

      }
    }
  }
  .u-thismore{
    text-align: center;
    margin-top:30px;
    a{
      height:50px;
      display: inline-block;
      width:180px;
      background:@brand-info;
      color: white;
      font-size:1.6rem;
      line-height: 50px;
      border-radius: 5px;
      margin:0 20px;
      &.bor-btn{
        .f-border(@brand-info);
        color: @brand-info;
        background: white;
      }
    }
  }
  .begin-btn{
    background:@brand-info;
    display: inline-block;
    .f-size(180px;50px);
    line-height: 50px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-size:1.4rem;
  }
}

.page-weather{
  &.u-code{
    margin:60px auto;
    .u-title{
      text-align: center;
      margin-bottom:50px;
      font-size:4.8rem;
      color:@gray;
    }
    .u-tianqitex{
      padding:0px 150px 50px;
      text-align: left;
      line-height: 1.7;
      font-size:1.4rem;
      color:@gray-light;
    }
    .u-tianqitable{
      .table {
        .f-border();
        width: 100%;
        thead {
          th{
            font-weight: normal;
            border-bottom:0px;
            padding:15px 20px;
            box-sizing: border-box;
            background:#f5f5f5;
          }
        }
        tbody {

            tr{
              .f-border-t();
              td{
                padding:20px;
                font-size:1.4rem;
                line-height: 1.7;
                background:#fafafa;
                color:@gray-light;
                img{width:50px;vertical-align: middle;}
              }
            }


        }
      }
    }
  }
  .u-kongqiaqi{
    margin-top:60px;
    .u-title{
      text-align: center;
      margin-bottom:50px;
      font-size:4.8rem;
      color:@gray;
    }
    padding:50px 0;
    .table{
      .f-border();
      thead
      th{
        font-weight: normal;
        border-bottom:0px;
        padding:15px 20px;
        background:#f5f5f5;
      }
      tr{
       .f-border-t();
        td{
          padding:20px;
          font-size:1.4rem;
          line-height: 1.7;
          background:#fafafa;
          color:@gray-light;
        }
      }
    }
    .aqi{
      display: inline-block;
      border-radius: 5px;
      color:#fff;
      .f-size(100px;30px);
      text-align: center;
      line-height: 30px;
    }
    .aqi-1{background:#63d416}
    .aqi-2{background:#ffcc00}
    .aqi-3{background:#ff8a00}
    .aqi-4{background:#f7000c}
    .aqi-5{background:#90024c}
    .aqi-6{background:#602000}
  }
  .u-servers{
    margin-top:50px;
    .item{
      position: relative;
      margin-left:50px;
      box-sizing: border-box;
      .f-size(480px;140px);
      background: white;
      margin-bottom:20px;
      padding-left:60px;
      float: left;margin-right:60px;
      img{
        position: absolute;
        left:-60px;
        top:20px;
      }
      h3{
        font-size:2rem;
        color: @gray;
        padding-top:20px;
      }
      p{
        margin-right:50px;
        margin-top:7px;
        font-size:1.4rem;
        color:@gray-light;
        line-height: 1.7;
      }
    }
  }
  .u-baozhang{
    margin-top:80px;
    .item{
      margin-left:1%;
      width: 28%;
      float: left;
      margin-right:3%;
      h3{
        font-size:2rem;
        color: @gray;
        position: relative;
        padding-top:20px;
        margin-bottom:20px;
        padding-bottom:10px;
        &:after{
          content: '';
          left:0px;
          position: absolute;
          display: inline-block;
          height:3px;
          bottom:0px;
          background:@brand-info;
          width:60px;
        }
      }
      p{
        margin-right:50px;
        margin-top:7px;
        font-size:1.4rem;
        color:@gray-light;
        line-height: 1.7;
      }
    }
  }
}


.m-morebox{
  margin-bottom:50px;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  height:330px;
  font-size:1.4rem;
  color: white;
  .u-title{
    padding-top:100px;
    font-size:3.6rem;
    text-align: center;
  }
  .u-tex{
    margin:15px 0;
  }
  .u-link{
    background: white;
    border-radius: 3px;
    display: inline-block;
    color:@brand-info;
    padding:10px 15px;
  }
  &.f-bc-gray{
    color:@gray;
    margin-bottom:0px;
    .u-tex{
      margin-top:40px;
      font-size:2rem;
     img{
       margin-left: 30px;
       vertical-align: middle;
       margin-right:10px;
     }
    }
  }
}


.m-erweima{
  text-align: center;
  background-image: -webkit-linear-gradient(top left, #34a1d6, #34c1d6 90%);
  padding:80px;
  .u-erweima{
    text-align: center;
    h3{
      color: white;
      font-size:3.6rem;
      margin-bottom:20px;
    }
    img{
      .f-size(220px;220px);
      margin:10px;
    }
    a{
      width: 220px;
      height:40px;
      text-align: center;
      background: white;
      line-height: 40px;
      display: inline-block;
      color:@brand-info;
      border-radius: 5px;
    }
  }
}
.u-footinfo{
  height:200px;
  box-sizing: border-box;
  text-align: center;
  background-image: -webkit-linear-gradient(top left, #34a1d6, #34c1d6 90%);
  padding-top:55px;
  h3{
    margin:20px;
    font-size:2.8rem;
    font-weight: normal;
    color:white;
  }
  .btns{
    float: right;
    margin-top:15px;
    a{
      .f-border(#fff);
      color:white;
      font-size:1.6rem;
      height:50px;
      line-height: 50px;
      padding:0 20px;
      display: inline-block;
      margin-left:20px;
      border-radius: 5px;
      &:hover{
        background: white;
        color:@brand-info;
      }
    }
  }
  p{
    font-size:3.6rem;
    margin:20px;
    color:white;
    float: left;
  }
}

.page-ip{
  .m-topview{
    background:#fff;
    margin-top:-110px;
    text-align: center;
    height:220px;
    border-radius: 10px;
    -moz-box-shadow:0px 2px 3px #7fe1f9;
    -webkit-box-shadow:0px 2px 3px #7fe1f9;
    box-shadow:0px 2px 3px #7fe1f9;
    .u-ip{
      padding:20px 0;
      font-size:1.6rem;
    }
    .item{
      margin-top:25px;
      width:24%;
      display: inline-block;
      .f-border-r();
      a{
        margin-top:10px;
        font-size:1.8rem;
        display: block;
        color:@gray-light;
        &:hover{
          text-decoration: underline;
          color:@brand-info;
        }
      }
      &:last-child{
        border:0px;
      }
    }
  }
}
.page-preview{
  background-size:cover;
  padding:80px 0;
  .u-title{
    font-size:3.6rem;
    color:@gray;
    .f-border-b();
    text-align: center;
    padding-bottom:20px;
  }
  .u-zhichi{
    margin-top:40px;
    text-align: center;
    li{
      width:150px;
      display: inline-block;
      margin:20px;
      padding:15px 0;
      span{
        display: block;
        font-size:2.4rem;
        color:@gray-light;
      }
      .f-border();
    }
  }
}

.page-jiaofei{
  margin-bottom:50px;
  .u-imgbs{
    background:url("../../static/imges/jiaofei/bg.png");
    color: white;
    background-position: center;
    text-align: center;
    height:470px;
    background-size:cover;
    background-repeat: no-repeat;

    .u-title{
      padding-top:80px;
      h4{
        font-size:3.6rem;
      }
      p{
        margin:15px 0;
        font-size:1.8rem;
      }
    }
    .u-citys{
      height:170px;
      .u-hd{
        font-size:2rem;
        height:60px;
        line-height: 60px;
        background-image: url("../../static/imges/jiaofei/bg_l.png");
        background-repeat: repeat-x;
        background-position: bottom;
        a{
          display: inline-block;
          color: white;
          padding:0 10px;
          &:hover,&.active{
            background-image: url("../../static/imges/jiaofei/bg_c.png");
            background-repeat: no-repeat;
            background-position: bottom center;
            color:@brand-info;
          }
        }
      }
      .u-bd{
        font-size:1.4rem;
        height:110px;
        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));
        border-radius: 4px;
        line-height: 1.7;
        padding:15px;
        a{
          color: white;
          display: inline-block;
          padding:0 5px;
          margin:5px;
        }
      }
    }
  }
}
.page-liulinag{
  margin-bottom:50px;
  .u-liuliang{
    background:url("../../static/imges/liuliang/img2.png");
    height:300px;
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    h3{
      font-size:3.6rem;
      color: white;
      height:220px;
      line-height: 220px;
      text-align: center;
    }
    .u-tab{
      height:80px;
      background:rgba(0,0,0,.6);
      color:#fff;
      a{
        display:inline-block;
        width:33%;
        height:80px;
        line-height: 80px;
        color: white;
        text-align: center;
        font-size:2rem;
        img{
          vertical-align: middle;
        }
        &:hover,&.active{
          background: white;
          color:@gray;
        }
      }
    }
  }
  .u-form{
    padding:20px 0;
    .item{
      padding:15px 0;
      span.nm{
        font-size:1.6rem;
        width:90px;
        line-height: 30px;
        float: left;
      }
      .rb{
        margin-left:100px;
        &.input{
          input{
            .f-border();
            height:30px;
            line-height: 30px;
            padding:0 5px;
            font-size:1.4rem;
          }
        }
        &.u-label{
          label{
            margin-right:20px;
            display: inline-block;
            height:30px;
            line-height: 30px;
            font-size:1.6rem;
            input{
              vertical-align: middle;
            }
          }
        }
        &.u-change{
          a{
            display: inline-block;
            .f-border();
            height:30px;
            line-height: 30px;
            color:@brand-info;
            padding:0 15px;
          }
          span{
            display: inline-block;
            .f-border();
            height:30px;
            line-height: 30px;
            padding:0 15px;
            cursor: pointer;
            &.active{
              .f-border(@brand-info);
              color:@brand-info;
            }
            &:hover{
              background:@gray-lighter;
            }
          }
        }
        &.u-price{
          line-height: 30px;
          span{
            font-size:1.4rem;
          }
          em{
            color:@gray-light;
            text-decoration: line-through;

          }
        }
        &.u-ft{
          .btn{
            background:@brand-info;
            color: white;
            font-size:1.6rem;
            border-radius: 5px;
            height:40px;
            padding:0 20px;
            line-height: 40px;
            display: inline-block;
          }
        }
      }
    }
  }
}
.page-widhdraw{
  .u-banner{
    text-align: center;
    background-image: url("../../static/imges/widhdraw/img3.png");
    background-position: center;
    background-repeat: no-repeat;
    height:300px;
    h3{
      padding-top:120px;
      display: block;
      font-size:3rem;
      color: white;
    }
  }
  .u-price{
    text-align: center;
    margin-top:80px;
    .item{
      margin:0 20px;
      width:370px;
      background: white;
      border-radius: 5px;
      display: inline-block;
      .f-border();
      cursor: pointer;
      dt{
        height:170px;
        .f-border-b();
        .name{
          color:@gray;
          padding-top:25px;
          font-size:2.4rem;
          display: block;
        }
        .en{
          display: block;
          padding-top:2px;
          color:@gray-light;
        }
        .price{
          padding-top:20px;
          color:@gray;
          font-size:1.6rem;
          span{
            font-size:3.6rem;
          }
        }
      }
      dd{
        height:190px;
        padding-left:50px;
        padding-top:60px;
        box-sizing: border-box;
        p{
          margin-bottom:15px;
          font-size:1.8rem;
          text-align: left;
          color:@gray-light;
          span{
            color: @gray;
          }
          img{
            vertical-align: middle;
            margin-right:5px;
          }
        }
      }
      &:hover{
        .f-border(white);
        -moz-box-shadow:0px 0px 2px #7fe1f9;
        -webkit-box-shadow:0px 0px 2px #7fe1f9;
        box-shadow:0px 0px 2px #7fe1f9;
      }
    }
  }
  .m-topview{
    padding:30px;
    .item{
      width:24%;
      padding-left:80px;
      box-sizing: border-box;
      height:56px;
      position: relative;
      display: inline-block;
      .f-border-r();
      h4{
        margin-top:2px;
        font-size:2rem;
        color:@gray;
      }
      p{
        font-size:1.4rem;
        color:@gray-light;
        margin-top:5px;
      }
      &:last-child{
        border:0px;
      }
      img{
        position: absolute;
        left:10px;
      }
    }
  }
}



.u-footer {

  text-align: center;
  background:#fafafa;
  color: @gray-light;
  padding: 70px 0 50px;
  font-size: 1.2rem;
  p{margin-bottom:10px;}
  a {
    color: @gray-light;
    padding: 0 2px;
    &:hover{
      color:@gray;
    }
  }
}

